<template>
  <div class="home">
    <div
      id="con"
      style="width: 90vw; height: 85vh; border: 1px solid #ccc"
    ></div>
    <el-button @click="big()">放大一级</el-button>
    <el-button @click="small()">缩小一级</el-button>
  </div>
</template>

<script>
import { lazyBMapApiLoaderInstance } from "vue-bmap-gl";
import img1 from "@/assets/logo.png";
export default {
  name: "DBaidu",
  components: {},
  data() {
    return {
      map: "",
      centerPoint: {
        lng: 108.95749,
        lat: 34.345952,
      },
      zoom: 13,
      mapType: "BMAP_EARTH_MAP",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    small() {
      this.map.zoomOut();
    },
    big() {
      this.map.zoomIn();
    },
    // 添加3d按钮
    NavControl3d() {
      var navi3DCtrl = new BMapGL.NavigationControl3D();
      this.map.addControl(navi3DCtrl);
    },
    // LocationControl(){
    //     // 创建定位控件
    //     var locationControl = new BMapGL.LocationControl({
    //         // 控件停靠位置，默认左上角
    //         // anchor:'BMAP_ANCHOR_TOP_RIGHT',

    //     })
    //     this.map.addControl(locationControl)
    //     // 添加定位事件
    //     locationControl.addEventListener('locationSuccess',function(e){
    //         var address = ''
    //         address += e.addressComponent.province
    //         address += e.addressComponent.city
    //         address += e.addressComponent.district
    //         address += e.addressComponent.street
    //         address += e.addressComponent.streetNumber
    //         alert('当前位置为：'+address)
    //     console.log(1111);

    //     })
    //     locationControl.addEventListener('locationError',function(e){
    //         alert(e.message)
    //     })
    // },
    // 添加标注
    addText() {
      var point = new BMapGL.Point(this.centerPoint.lng, this.centerPoint.lat);
      var content = "这是西安";
      var label = new BMapGL.Label(content, {
        position: point,
        offset: new BMapGL.Size(10, 10),
      });
      this.map.addOverlay(label);
      label.setStyle({
        color: "#000",
        fontSize: "15px",
        border: "1px solid #ccc",
      });

      var point1 = new BMapGL.Point(107, 34);
      var content1 = "这是宝鸡";
      var label1 = new BMapGL.Label(content1, {
        position: point1,
        offset: new BMapGL.Size(10, 10),
      });
      this.map.addOverlay(label1);
      label1.setStyle({
        color: "#000",
        fontSize: "15px",
        border: "1px solid #ccc",
      });

      var point2 = new BMapGL.Point(107.0138, 33.0436);
      var content2 = "这是汉中";
      var label2 = new BMapGL.Label(content2, {
        position: point2,
        offset: new BMapGL.Size(10, 10),
      });
      this.map.addOverlay(label2);
      label2.setStyle({
        color: "#000",
        fontSize: "15px",
        border: "1px solid #ccc",
      });
    },
    // 添加图片文字
    addIcon() {
      // 创建点标记
      var marker1 = new BMapGL.Marker(new BMapGL.Point(105.404, 34.925));
      var marker2 = new BMapGL.Marker(new BMapGL.Point(106.404, 34.915));
      var marker3 = new BMapGL.Marker(new BMapGL.Point(107.395, 35.935));
      var marker4 = new BMapGL.Marker(new BMapGL.Point(108.415, 33.931));
      // 在地图上添加点标记
      this.map.addOverlay(marker1);
      this.map.addOverlay(marker2);
      this.map.addOverlay(marker3);
      this.map.addOverlay(marker4);

// 弹窗
var point1 = new BMapGL.Point(105.404, 34.925);
var point2 = new BMapGL.Point(106.404, 34.915);
var point3 = new BMapGL.Point(107.395, 35.935);
var point4 = new BMapGL.Point(108.415, 33.931);

      // 创建信息窗口
      var opts = {
        width: 200,
        height: 100,
        title: "123",
      };
      var infoWindow = new BMapGL.InfoWindow(
        "地址：这是测试",
        opts
      );
      // 点标记添加点击事件
      marker1.addEventListener("click", function () {
        this.map.openInfoWindow(infoWindow, point1); // 开启信息窗口
      });
      marker2.addEventListener("click", function () {
        this.map.openInfoWindow(infoWindow, point2); // 开启信息窗口
      });
      marker3.addEventListener("click", function () {
        this.map.openInfoWindow(infoWindow, point3); // 开启信息窗口
      });
      marker4.addEventListener("click", function () {
        this.map.openInfoWindow(infoWindow, point4); // 开启信息窗口
      });
    },
    addImg() {
      // 创建小车图标
      //如果使用本地图片，可以用 require("../../icons/map/camera.png") ，否则不显示图片，网络图片则没有此问题。
      var myIcon = new BMapGL.Icon(img1, new BMapGL.Size(32, 36));
      // 创建Marker标注，使用小车图标
      var pt = new BMapGL.Point(109.017, 34.309);
      var marker5 = new BMapGL.Marker(pt, {
        icon: myIcon,
      });
      // 将标注添加到地图
      this.map.addOverlay(marker5);
    },
    init() {
      lazyBMapApiLoaderInstance.load().then(() => {
        const GL = BMapGL;
        this.map = new GL.Map("con", {
          minZoom: 5,
          maxZoom: 20,
        }); //创建map实例
        this.map.centerAndZoom(
          new GL.Point(this.centerPoint.lng, this.centerPoint.lat),
          this.zoom
        );
        this.map.enableScrollWheelZoom(true);
        this.map.setMapType(this.mapType);
        this.NavControl3d();
        this.addText();
        this.addIcon();
        this.addImg();
        // this.LocationControl()
      });
    },
  },
};
</script>
<style>
.home {
  margin: 0;
  padding: 0;
}
</style>
